<template>
  <div class="login-page">
    <div class="login-main">
      <div class="login-banner-cover">
        <div class="login-banner"></div>
      </div>
      <div class="middle-login">
        <div class="login-title">无人机申请账号登录</div>
        <div class="middle-login-main">
          <a-form
              ref="formRef"
              :model="formState"
              autocomplete="off"
              class="login-form"
              size="large"
              @finish="onFinish"
              @finish-failed="onFinishFailed"
          >
            <a-form-item name="loginName" class="form-item">
              <a-input
                  v-model:value="formState.loginName"
                  size="large"
                  placeholder="请输入用户名"
              >
                <template #prefix>
                  <UserOutlined class="form-item-icon" />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item name="loginPwd" class="form-item">
              <a-input
                  v-model:value="formState.loginPwd"
                  size="large"
                  type="password"
                  placeholder="请输入密码"
              >
                <template #prefix>
                  <LockOutlined class="form-item-icon" />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item>
              <a-button
                  :loading="loading"
                  type="primary"
                  size="large"
                  class="login-form-button"
                  html-type="submit"
                  style="background-color: #0f7cff"
              >
                登录
              </a-button>
            </a-form-item>
          </a-form>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup>
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
import {
  reactive,
  ref,
} from 'vue'
import {useRouter} from "vue-router";
import loginApi from '@/api/login/index'
import common from "@/common/common";
import {message} from "ant-design-vue";
import MD5 from './common/md5.js'

const router = useRouter()
const loading = ref(false)
const formState = reactive({
  loginName: '',
  loginPwd: '',
})

//登录方法
const onFinish = async () => {
  loginApi.login({username: formState.loginName, password: MD5.hex_md5(formState.loginPwd)}).then((res) => {
    if (res.data && res.data.token){
      common.setLocalToken(res.data.token)
      router.replace('/')
    } else {
      message.error(res.message || '登录失败')
    }
  }).catch((e) => {
    console.log(e)
    message.error('登录异常')
  })
}

//校验失败
const onFinishFailed = (errorInfo) => {
  console.log('验证失败:', errorInfo)
}


</script>

<style scoped lang="less">
.login-page{
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(113deg, #58adbc, #55b0d7 18%, #52b2f2 44%, #4a8dcf 70%, #4168ac);
  background: -ms-linear-gradient(113deg, #58adbc 0, #55b0d7 18%, #52b2f2 44%, #4a8dcf 70%, #4168ac 100%);
}
.login-main{
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;
  position: relative;
}
.login-banner-cover{
  position: absolute;
  top: 50%;
  transform: translateY(-45%);
  .login-banner{
    background-image: url("./assets/img/login-banner.png");
    width: 511px;
    height: 372px;
    background-size: cover;
  }
}
.middle-login-main{
  padding: 5px 15px 0 15px;
}
.middle-login{
  width: 470px;
  height: 386px;
  min-width: 423px;
  background: #fff;
  border-radius: 10px;
  display: inline-block;
  vertical-align: middle;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
}
.login-title {
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  text-align: center;
  letter-spacing: 10px;
  margin-top: 30px;
}
.login-button {
  width: 320px;
  margin: 0 auto 0 auto;
}
.login-img {
  background-image: url('~@/assets/images/login/img7.png');
  width: 423px;
  height: 28px;
  margin: 10px auto 0;
}
.login-ca-text2 {
  color: #ccc;
  margin: 0 auto;
  text-align: center;
}
.login-ca-button {
  width: 320px;
  margin: 10px auto;
}
.login-ca-download {
  width: 130px;
  height: 33px;
  background: #398fd7;
  border-radius: 5px;
  border: none;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  outline: none;
  margin-right: 60px;
}
.login-ca-contact {
  width: 130px;
  height: 33px;
  background: #ff9a64;
  border-radius: 5px;
  border: none;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  outline: none;
}

.login-qr-img {
  background-image: url('~@/assets/images/login/qr_init.png');
  width: 260px;
  height: 260px;
  margin: 20px auto 20px auto;
  text-align: center;
  padding-top: 20px;
  padding-left: 20px;
  background-size: cover;
}

.login-form {
  width: 320px;
  margin: auto;
}
.form-item {
  margin: 25px auto;
}
.form-item-icon {
  // color: var(--ant-primary-color);
  color: #0f7cff;
  // color: var(--ant-primary-color);
}
.login-form-button {
  width: 100%;
  height: 47px;
  border-radius: 10px;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  outline: none;
}

</style>
